<template>
  <div>
    <header>
      <van-icon @click="$router.push('/logo')" name="arrow-left" />
      全部订单
      <a> </a>
    </header>
    <van-row class="row">
      <van-col
        v-for="v in states"
        :key="v"
        :class="state === v ? 'active' : ''"
        @click="(state = v), getlist()"
      >
        {{ v }}
      </van-col>
    </van-row>
    <dl v-for="v in list.values" :key="v.id">
      <dd>
        <a href="" @click="$router.push('/ticketdetail/' + v.id)">
          出票完成<br/>  
          ${{ v.price }}
        </a>
        火车票 {{ v.sub }}
        <p>{{ v.line }} -{{ v.line1 }}</p>
        <p>{{ v.date }} &ensp; {{ v.time }} &ensp; {{ v.time1 }}</p>
        <p>车次 {{ v.train }} {{ v.car }}车厢 {{ v.num }}号</p>
        <van-button size="small" @click="del(v.id)" color="red">
          删除订单
        </van-button>
      </dd>
    </dl>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "@vue/runtime-core";
import { HttpTicket, TicketDel } from "api";
import "vant/es/toast/style";
import Mock from "mockjs";
export default {
  data() {
    return { num: Mock.mock("@integer(10,60)") };
  },
  setup(props, context) {
    // 父组件传给子组件的 参数
    const { attrs, slots, emit } = context;
    const date = ref("2022-12-26");
    const list = reactive({});
    const states = reactive(["全部", "待出行", "待支付", "未支付"]);
    const state = ref("全部");
    const city1 = ref(JSON.parse(localStorage.getItem("city1")));
    async function getlist() {
      const form = {
        pageSize: 1,
        pageCode: 140,
        val: "",
        type: "全部",
        state: "全部",
        date: "",
      };
      const res = await HttpTicket({
        ...form,
      });
      list.values = res.data.data.filter((v) => {
        if (state.value === "全部") return true;
        else return v.sub === state.value;
      });
      console.log(state, list.values);
      console.log(list.values);
    }
    async function del(id) {
      const res = await TicketDel({ id });
      console.log(res.data);
      getlist();
    }

    onMounted(() => {
      getlist();
    });
    return {
      list,
      getlist,
      city1,
      date,
      states,
      del,
      state,
    };
  },
};
</script>
<style scoped  lang='scss' >
header {
  background-color: cadetblue;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;

  color: white;
  i {
    background-color: white;
    color: #000;
    border-radius: 50%;
    padding: 3px;
    height: 13px;
  }
}
.row {
  line-height: 30px;
  margin-top: 3px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  div.active {
    display: flex;
    width: 90px;
    color: white;
    background-color: cadetblue;
    display: block;
    text-align: center;
  }
}

.con {
  width: 83%;
  overflow: hidden;
  margin: 0px auto;
  line-height: 33px;
  .col {
    text-align: center;
    width: 86%;
    border-bottom: solid 1px #ccc;
  }
  .cel {
    color: gray;
  }
}

dl {
  border: solid 1px #ccc;
  padding: 10px;
  width: 90%;
  margin: 10px auto;
  line-height: 30px;
  border-radius: 10px;
  a {
    float: right;
    font-size: 16px;
  }
  button {
    float: right;
    margin-top: -30px;
    width: 30%;
  }
}
</style>